<template>
  <div class="recommend">
    <div class="recom-title">周末去哪儿游</div>
    <ul>
        <li 
            class="recom-item border-bottom" 
            v-for="item of list" 
            :key="item.id"
        >
            <div class="recom-item-img">
                <img class="recom-item-img-in" :src="item.imgUrl">
            </div>
            <div class="recom-item-info">
                <h2  class="recom-item-tit">
                       {{item.title}}
                </h2>
                <p class="recom-item-desc">{{item.desc}}</p>
            </div>
        </li>
    </ul>
  </div>
</template>

<script type="text/javascript">
export default {
  name: 'HomeWeekend',
  props:{
      list:Array
  },
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
    .recom-title
        height .8rem
        line-height .8rem
        background #ccc
        text-indent .2rem
    .recom-item-img
        overflow hidden
        width 100%
        height 0
        padding-bottom 33.9%
        .recom-item-img-in
            width 100%
    .recom-item-info
        padding .1rem
        .recom-item-tit
            font-size .28rem
            color #000
            margin-bottom .2rem
            ellipsis()
        .recom-item-desc
            font-size .24rem
            color #666
            margin-bottom .2rem
            ellipsis()
        .recom-item-btn
            background  #ff9300
            padding 0 .1rem
            border-radius .06rem
            color #fff
            float right
            
</style>
